<template>
	<view class="container">
		<view class="header">
			<u-search placeholder="请输入关键词查询" :show-action="false" v-model="searchForm.condition"
				@change="inputWord"></u-search>
			<view class="fav">
				<uni-fav :star="false" @click="onClick" bgColorChecked="#000" :checked="checked"
					:contentText="{contentDefault: '表格',contentFav: '表格'}"></uni-fav>
				<uni-fav :star="false" @click="onClick" bgColorChecked="#000" :checked="!checked"
					:contentText="{contentDefault: '列表',contentFav: '列表'}"></uni-fav>
			</view>
		</view>
		<view class="table-wrapper" v-if="checked && allData.length > 0">
			<uni-table border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center" width="200" v-for="(col, index) in columns"
						:key="index">{{col.value}}</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, rowIndex) in currentPageData" :key="rowIndex" @tap.native="clickForm(item)">
					<!-- <uni-td align="center" v-for="(col, colIndex) in columns"
						:key="colIndex">{{item[col.key] || '-'}}</uni-td> -->
					<uni-td align="center" v-for="(col, colIndex) in columns" :key="colIndex">
						<template v-if="col.key === 'gif' && item[col.key]">
							<image v-for="(img, imgIndex) in item[col.key].split(',')" :key="imgIndex"
								:src="`https://${BASE_URL.apiUrl}/api` + img "
								style="width: 80px; height: 80px; margin: 5px;" />
						</template>
						<template v-else>{{item[col.key] || '-'}}</template>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="list-wrapper" v-else-if="!checked && allData.length > 0">
			<u-swipe-action>
				<view v-for="(item, index) in currentPageData" :key="index">
					<u-cell-group>
						<u-cell>
							<view slot="title" class="content" v-for="col in columns">
								<view class="text-bold text-grey">
									<view class="ellipsis-description">{{col.value}} ：{{item[col.key] || '-'}}</view>
									
									
								</view>
							</view>
						</u-cell>
					</u-cell-group>
					</u-swipe-action-item>
				</view>
			</u-swipe-action>
		</view>
		<view class="pagination-wrapper" v-if="allData.length > 0">
			<uni-pagination :total="total" :current="currentPage" :pageSize="pageSize"
				@change="handlePageChange"></uni-pagination>
		</view>
		<uni-fab horizontal="right" vertical="bottom" @fabClick="add" ></uni-fab>
	</view>
</template>

<script>
	import {
		re
	} from 'prettier';
	import configService from '@/api/sys/configService.js'
	export default {
		data() {
			return {
				checked: true,
				dataRes: {},
				palletCaption: '',
				searchForm: {
					condition: '',
				},
				columns: [], // 动态列名	
				total: 0, // 总条数
				pageSize: 10, // 每页条数
				currentPage: 1, // 当前页码
				allData: [], // 存储所有数据
				currentPageData: [], // 当前页显示的数据
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			new Promise((resolve, reject) => {
				eventChannel.on('sendData', (data) => {
					uni.setNavigationBarTitle({
						title: data.sTypeName
					});
					this.palletCaption = data.sPalletCaption;
					this.dataRes = data
					this.fetchTableData();
					resolve();
				}, (err) => {
					reject(err);
				});
			})
		},
		methods: {
			inputWord() {
				this.fetchTableData();
			},
			onClick() {
				this.checked = !this.checked;
			},
			clickForm(item) {
				const data = {
					palletCaption: this.palletCaption,
					dataItem: item,
					method: "edit",
					dataRes: this.dataRes,
				}
				uni.navigateTo({
					url: "/pages/subA/sys/appConfigure/appConfigForm",
					success: (res) => {
						res.eventChannel.emit('sendData', data);
					}
				});
			},
			async fetchTableData() {
				try {
					const res = await configService.getConfigId(this.palletCaption, this.searchForm.condition);
					// 过滤掉id字段的列名提取方法
					this.columns = res.columns.filter(column => column.key !== "id");
					this.allData = res.tableData;
					this.total = res.tableData.length;
					this.updateCurrentPageData();
				} catch (e) {
					uni.showToast({
						title: '数据加载失败',
						icon: 'none'
					})
				}
			},
			// 更新当前页数据
			updateCurrentPageData() {
				const start = (this.currentPage - 1) * this.pageSize;
				const end = start + this.pageSize;
				this.currentPageData = this.allData.slice(start, end);
			},
			// 分页改变
			handlePageChange(e) {
				this.currentPage = e.current;
				this.updateCurrentPageData();
			},

			add() {
				// const data = {
				// 	palletCaption: this.palletCaption,
				// 	dataItem: "item",
				// 	method: "add",
				// 	dataRes: this.dataRes,
				// };

				// uni.navigateTo({
				// 	url: "/pages/sys/appConfigure/appConfigForm",
				// 	success: (res) => {
				// 		new Promise((resolve, reject) => {
				// 			res.eventChannel.emit('sendData', data, () => {
				// 				resolve();
				// 			}, (err) => {
				// 				reject(err);
				// 			});
				// 		})
				// 	}
				// });



				// 主页面传值代码
				uni.navigateTo({
					url: "/pages/subA/sys/appConfigure/appConfigForm",
					success: (res) => {
						res.eventChannel.emit('sendData', {
							palletCaption: this.palletCaption,
							dataItem: "item",
							method: "add",
							dataRes: this.dataRes
						});
					}
				});

			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 50px);
		overflow: hidden;
	}

	.header {
		flex: 0 0 auto;
		padding: 20rpx;
		background-color: #fff;
		/* 可以根据需要调整背景色 */
	}

	.table-wrapper,
	.list-wrapper {
		flex: 1 1 auto;
		overflow-y: auto;
		/* 允许垂直滚动 */
		padding: 0 20rpx;
		/* 根据需要调整内边距 */
	}

	.table {
		width: 100%;
		/* 表格宽度占满容器 */
		border-radius: 0;
		/* 移除边框圆角 */
	}

	.pagination-wrapper {
		flex: 0 0 auto;
		background-color: #fff;
		/* 可以根据需要调整背景色，与header保持一致 */
		padding: 0rpx 10rpx;
		/* 根据需要调整内边距 */
		position: sticky;
		/* 固定在底部 */
		bottom: 0;
		z-index: 10;
		/* 确保分页控件在其他内容之上 */
	}

	.fav {
		display: flex;
		justify-content: flex-end;
		margin-top: -20rpx;
		/* 调整与搜索框的间距 */
		margin-bottom: 0;
	}

	.u-search {
		margin: 0px 20px !important;
		height: 50px;
	}
	
	::v-deep .uni-fab__circle--rightBottom {
	  bottom: 50px !important;
	}

	/* 明确设置搜索框高度 */
</style>